<template>
  <div>
    <zbTable ref="tableRef" :api-fun="get_store_check_list" @action="action">
      <template #toolbar>
        <a-space>
          <a-button
            :type="item.types == 'add' ? 'primary' : 'dashed'"
            v-for="item in optBtn"
            :key="item.url"
            v-permission="item.url"
            @click="topAction(item)"
          >
            <template #icon>
              <plus-outlined v-if="item.types == 'add'" />
              <clear-outlined v-else-if="item.types == 'delete'" />
            </template>
            <span>{{ item.name }}</span>
          </a-button>
        </a-space>
      </template>
    </zbTable>
    <add v-if="addShow" v-model:visible="addShow" @done="done" />
    <dianshu
      v-if="dianshuShow"
      v-model:visible="dianshuShow"
      :dianshuId="dianshuId"
      @done2="done2"
    />
    <detail
      v-if="detailShow"
      v-model:visible="detailShow"
      :detailId="detailId"
    />
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined
  } from '@ant-design/icons-vue';
  import zbTable from '@/components/zbTable/index.vue';
  import add from './components/add.vue';
  import dianshu from './components/dianshu.vue';
  import detail from './components/detail.vue';
  import { get_store_check_list } from '@/api/warehouse/store_check';
  // 获取子组件
  const tableRef = ref(null);
  const optBtn = ref([]);
  const addShow = ref(false);
  const dianshuShow = ref(false);
  const dianshuId = ref(null);
  const detailShow = ref(false);
  const detailId = ref(null);
  onMounted(() => {
    get_store_check_list({ page: 1, page_size: 10 })
      .then(async (res) => {
        optBtn.value = res.top_button;
      })
      .catch((e) => {
        message.error(e);
      });
  });
  const topAction = (item) => {
    if (item.types == 'add') {
      addShow.value = true;
    }
  };
  /* 打开编辑弹窗 */
  const action = (data) => {
    if (data.action_data.type == 'detail') {
      detailId.value = data.row_data.id;
      detailShow.value = true;
    }
  };

  const done = (id) => {
    dianshuId.value = id;
    reloadTable();
  };
  const reloadTable = () => {
    addShow.value = false;
    tableRef.value.reload();
    dianshuShow.value = true;
  };
  const done2 = () => {
    console.log('done2222222');
    tableRef.value.reload();
    dianshuShow.value = false;
  };
</script>
